<!doctype html>
<html>
	<head>
		<title> Test PUI style with angular -- autocomplete </title>
		<link rel="stylesheet" href="../jquery-ui/jquery-ui-1.9.2.custom.min.css" />
		<link rel="stylesheet" href="../development/primeui-1.0.css" />
		<link rel="stylesheet" href="../themes/aristo/theme.css" />
		<style>
		.pui-dropdown-panel .pui-dropdown-filter-container .ui-icon {
			top: 15px;
			right: 20px;
		}
		</style>
	</head>

	<body ng-controller="MainCtrl">

	<h2>Basic</h2>
	<input type="text" ng-model="aa" 
		ng-disabled="ctrl.isGray"
		pui-textfield="" pui-autocomplete="" data-list="list" />
	<br />
	{{aa}}
	<br />

	<input type="text" ng-model="bb" 
		pui-textfield="" pui-autocomplete="" data-list="list" />
	<br />
	{{bb}}
	<br />

	<input type="text" ng-model="cc" 
		pui-textfield="" 
		pui-autocomplete="" 
		ng-disabled="ctrl.isGray" 
		data-multiple="true" data-list="list" />
	<br />
	{{cc}}
	<br />

	<input type="text" ng-model="dd" pui-autocomplete="{title: 'select a city'}" 
		ng-disabled="ctrl.isGray" 
		data-dropdown="true" data-list="list" />
	<br />
	{{dd}}
	<br />

	<script type="text/javascript" src="zepto-1.1.3.js"></script>
	<script type="text/javascript" src="angular.js"></script>
	<script type="text/javascript" src="underscore.min.js"></script>
	<script type="text/javascript" src="base.js"></script>
	<script type="text/javascript" src="all.js"></script>
	<script language="javascript">
	var md = angular.module('md', ['pui']);

	md.controller('MainCtrl', function($scope, $timeout){
		$scope.list = [];
		var i = 0;
		for(; i < 50; i++){
			var pre = i < 20 ? 'aaa' : 'bbb';
			$scope.list.push({label: pre + i, value: pre + i});
		}

		$scope.ctrl = {
			isGray: false
		};

		$scope.cc = ['aaa', 'bbb'];

		$scope.dd = 'aaa';

		$timeout(function(){
//			$scope.ctrl.isGray = true;
		}, 1000 * 3);
	});

	angular.bootstrap(document, ['md']);
	</script>
	</body>
</html>